<template>
    <div class="layout-padding">
        <div class="layout-padding-auto layout-padding-view">
            <!--查询表单-->
            <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">

                <el-form-item :label="$t('inProduction.materialCode')" prop="materialCode">
                    <el-input v-model="state.queryForm.materialCode" clearable :placeholder="$t('inProduction.enterMaterialCode')" />
                </el-form-item>

                <el-form-item :label="$t('inProduction.materialName')" prop="materialName">
                    <el-input v-model="state.queryForm.materialName" clearable :placeholder="$t('inProduction.enterMaterialName')" />
                </el-form-item>

                <el-form-item :label="$t('inProduction.productionLine')" prop="productionLine">
                    <el-input v-model="state.queryForm.productionLine" clearable :placeholder="$t('inProduction.enterProductionLine')" />
                </el-form-item>

                <el-form-item :label="$t('inProduction.isForbidden')" prop="isForbidden">
                            <el-select v-model="state.queryForm.isForbidden" style="width: 160px">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-search" type="primary"  @click="getDataList">{{$t('inProduction.query')}}</el-button>
                    <el-button icon="refresh" @click="resetQuery">{{$t('inProduction.reset')}}</el-button>
                    <el-button icon="el-icon-plus"  type="primary" @click="inDialogRef.openAddDialog()">{{$t('inProduction.add')}}</el-button>
                    <el-button icon="el-icon-delete" type="danger" @click="handleDelete(selectObjs)">{{$t('inProduction.delete')}}</el-button>
                </el-form-item>
            </el-form>
             <!--查询结果的列表-->
          <el-table :data="state.dataList" highlight-current-row
                    v-loading="state.loading" border style="width: 100%;height: 100%"
                    :cell-style="tableStyle.cellStyle" stripe :header-cell-style="tableStyle.headerCellStyle"
                    @row-click="clickRow"
                    @selection-change="selectionChangeHandle">
            <el-table-column type="selection" width="40" align="center"/>
            <el-table-column type="index" label="#" width="50" />
            <el-table-column prop="materialCode" :label="$t('inProduction.materialCode')" width="150"/>
            <el-table-column prop="materialName" :label="$t('inProduction.materialName')" width="200"/>
            <el-table-column prop="materialSpec" :label="$t('inProduction.materialSpec')" width="330"/>
            <el-table-column prop="processCode" :label="$t('inProduction.processCode')" />
            <el-table-column prop="processName" :label="$t('inProduction.processName')" />
            <el-table-column prop="inProductionQty" :label="$t('inProduction.inProductionQty')" >
                            <template #default="scope">
                                <el-tag
                                    :type="''">
                                    {{ scope.row.inProductionQty }}
                                </el-tag>
                            </template>
            </el-table-column>
            <el-table-column prop="attribute1" :label="$t('inProduction.attribute1')">
                            <template #default="scope">
                                <el-tag
                                    :type="'warning'">
                                    {{ scope.row.attribute1 }}
                                </el-tag>
                            </template>
            </el-table-column>
            <el-table-column prop="isForbidden" :label="$t('inProduction.isForbidden')">
                            <template #default="scope">
                                <el-tag
                                    :type="scope.row.isForbidden === 'Y' ? 'success' : 'danger'">
                                    {{ scope.row.isForbidden === 'Y' ? $t('inProduction.yes') : $t('inProduction.no') }}
                                </el-tag>
                            </template>
            </el-table-column>
            <!-- <el-table-column prop="productionLine" :label="$t('inProduction.productionLine')"/> -->
            <el-table-column prop="forbiddenTime" :label="$t('inProduction.forbiddenTime')"/>
               
            <el-table-column fixed="right" :label="$t('inProduction.operation')" width="140">
              <template #default="scope">
                <el-button icon="edit"  type="primary" v-auth="'platform_basDicSet_edit'"
                           @click="inDialogRef.openEditDialog(scope.row)">{{$t('inProduction.edit')}}
                </el-button>
                <!-- <el-button icon="delete" type="primary" text
                           @click="handleDelete([scope.row.id])">
                  {{$t('inProduction.delete')}}
                </el-button> -->
              </template>
            </el-table-column>
          </el-table>
          <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination"/>
        </div>
        <inForm ref="inDialogRef" @refresh="getDataList(false)"/>
    </div>
</template>

<script setup lang="ts" >
import { defineAsyncComponent, reactive, ref } from "vue";
import { BasicTableProps, useTable } from "/@/hooks/table";
import {useMessage, useMessageBox} from "/@/hooks/message";
import {getInProductionList,deleteInProduction} from "/@/api/platform/wms/inProduction";
import {useI18n} from 'vue-i18n';
const {t} = useI18n();
const inForm =  defineAsyncComponent(() => import('./inForm.vue'));

//下拉框
const options = ref([
    { label: t('inProduction.all'), value: 'All' },
    { label: t('inProduction.yes'), value: 'Y' },
    { label: t('inProduction.no'), value: 'N' }
]);

// 搜索变量
const queryRef = ref()
const inDialogRef = ref()

const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {},
    pageList: getInProductionList
})

state.queryForm.isForbidden='All'

const {
    getDataList,
    currentChangeHandle,
    sizeChangeHandle,
    sortChangeHandle,
    downBlobFile,
    tableStyle
} = useTable(state)

// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)

// 多选事件
const selectionChangeHandle = (objs: { id: string }[]) => {
  selectObjs.value = objs.map(({id}) => id);
  multiple.value = !objs.length;
};
// 删除操作
const handleDelete = async (ids: Array<number>) => {
  if (ids?.length === 0) {
    return useMessage().warning(t('inProduction.selectDelete'))
  }

  const idArray: IdArray = ids.map(item => (item));

  useMessageBox().confirm(t('inProduction.permanentlyDeleted')).then(async () => {
    try {
      await deleteInProduction({
        Ids : idArray
      })
      getDataList();
      useMessage().success(t('inProduction.deleteSuccess'));
    } catch (err: any) {
      useMessage().error(t('inProduction.deleteFaild') + err.msg)
    }
  })
};


// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields()
  // 清空多选
  selectObjs.value = []
  getDataList(false)
}

</script>